<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">编辑资料</text>
      <text class="save-btn" @tap="saveProfile">保存</text>
    </view>
    
    <!-- 头像编辑 -->
    <view class="avatar-section">
      <image class="avatar" :src="userInfo.avatar"></image>
      <view class="change-avatar-btn" @tap="changeAvatar">
        <text>更换头像</text>
      </view>
    </view>
    
    <!-- 表单 -->
    <view class="form-section">
      <view class="form-item">
        <text class="form-label">用户名</text>
        <input type="text" v-model="userInfo.username" placeholder="请输入用户名" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">性别</text>
        <view class="gender-options">
          <view 
            class="gender-option" 
            :class="{ active: userInfo.gender === '男' }"
            @tap="userInfo.gender = '男'"
          >
            <text>男</text>
          </view>
          <view 
            class="gender-option" 
            :class="{ active: userInfo.gender === '女' }"
            @tap="userInfo.gender = '女'"
          >
            <text>女</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">生日</text>
        <picker 
          mode="date" 
          :value="userInfo.birthday" 
          start="1950-01-01" 
          end="2023-12-31" 
          @change="birthdayChange"
          class="form-picker"
        >
          <view class="picker-text">
            <text>{{ userInfo.birthday || '请选择生日' }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号</text>
        <input type="number" v-model="userInfo.phone" placeholder="请输入手机号" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">邮箱</text>
        <input type="text" v-model="userInfo.email" placeholder="请输入邮箱" class="form-input" />
      </view>
      
      <view class="form-item">
        <text class="form-label">个人简介</text>
        <textarea 
          v-model="userInfo.bio" 
          placeholder="介绍一下自己吧" 
          class="form-textarea"
          maxlength="200"
        ></textarea>
        <text class="textarea-counter">{{ userInfo.bio.length }}/200</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '用户名',
        avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
        gender: '女',
        birthday: '1995-01-01',
        phone: '13812345678',
        email: 'example@email.com',
        bio: '这里是个人简介，介绍一下自己吧！'
      }
    }
  },
  onLoad() {
    // 这里应该从全局状态或缓存中获取用户信息
    // 模拟从服务器获取用户信息
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.userInfo.avatar = tempFilePaths[0];
          
          // 这里应该有上传头像到服务器的逻辑
          uni.showToast({
            title: '头像已更新',
            icon: 'success'
          });
        }
      });
    },
    
    birthdayChange(e) {
      this.userInfo.birthday = e.detail.value;
    },
    
    saveProfile() {
      // 表单验证
      if (!this.userInfo.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      
      if (this.userInfo.phone && !/^1\d{10}$/.test(this.userInfo.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      if (this.userInfo.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.userInfo.email)) {
        uni.showToast({
          title: '请输入正确的邮箱',
          icon: 'none'
        });
        return;
      }
      
      // 保存用户信息
      // 这里应该有保存到服务器的逻辑
      uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
      
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
      
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
}
</script>

<style>
.container {
  padding: 0;
  background-color: #F5F5F5;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: relative;
}

.icon-back {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.save-btn {
  font-size: 28rpx;
  color: #8a2be2;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}

.change-avatar-btn {
  padding: 10rpx 30rpx;
  background-color: #f0e6ff;
  border-radius: 30rpx;
}

.change-avatar-btn text {
  font-size: 24rpx;
  color: #8a2be2;
}

.form-section {
  background-color: #fff;
  padding: 0 30rpx;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.form-input {
  font-size: 28rpx;
  color: #333;
  width: 100%;
}

.gender-options {
  display: flex;
}

.gender-option {
  padding: 10rpx 40rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.gender-option.active {
  background-color: #8a2be2;
}

.gender-option.active text {
  color: #fff;
}

.gender-option text {
  font-size: 28rpx;
  color: #666;
}

.form-picker {
  width: 100%;
}

.picker-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 32rpx;
  color: #999;
  transform: rotate(90deg);
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.textarea-counter {
  position: absolute;
  right: 0;
  bottom: 30rpx;
  font-size: 24rpx;
  color: #999;
}
</style>